<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100%;
  }
  .layout-logo{
    width: 200px;
    line-height: 40px;
    height: 40px;
    border-radius: 3px;
    float: left;
    position: relative;
    top: 15px;
    left: 20px;
    font-weight: bold;
    text-align: center;
    color: beige;
    font-size: 20px;
    align-content: center;
  }
  .layout-nav{
    width: 590px;
    margin: 0 auto;
    margin-right: 20px;
  }
  .layout-footer-center{
    text-align: center;
  }
  .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }
     .demo-drawer-profile{
        font-size: 14px;
    }
    .demo-drawer-profile .ivu-col{
        margin-bottom: 12px;
        
    }
</style>

<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                    <div class="layout-logo">游戏资讯分享平台</div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <a @click="Home('Home')">头条</a>
                        </MenuItem>
                        <MenuItem name="2">
                            <a @click="SportsCircle('sportsClick')" >资讯社区</a>
                        </MenuItem>
                        <MenuItem name="3">
                            <a @click="Team('Team')">游戏库</a>
                        </MenuItem>
                        <MenuItem name="4">
                            <a  @click="MyTieZi('MyTieZi')" >我的资讯</a>
                        </MenuItem>
                        <MenuItem name="5">
                            <a @click="TableMain('TableMain')">关于我
                                <Badge :count="number"></Badge>
                            </a>
                        </MenuItem>
                         <MenuItem name="6">
                            <a @click="adminOut('adminOut')" style="color:red">退出登录</a>
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
             <div style="background:#eee;padding: 20px;width:1000px;margin: 0 auto;margin-top: 20px;">
                <Card :bordered="false">
                    <p slot="title">{{tableDate.username}}</p>
                     <Row>
                        <i-col span="12">邮箱：{{tableDate.email}}</i-col>
                        <i-col span="12">电话：{{tableDate.phone}}</i-col>
                    </Row>
                     <Row>
                        <i-col span="12">性别：{{tableDate.sex}}</i-col>
                        <i-col span="12">地址：{{tableDate.zone}}</i-col>
                    </Row>
                     <Row>
                        <i-col span="12">创建时间：{{tableDate.createDatetime}}</i-col>
                        <i-col span="12">角色：{{tableDate.type}}</i-col>
                    </Row>
                </Card>
            </div>
             <div style="background:#eee;padding: 20px;width:1000px;margin: 0 auto;margin-top: 20px;">
                <Card :bordered="false">
                    <p slot="title">我的好友</p> 
                    <p>
                        <i-button type="primary" @click="findAll()">添加好友 </i-button> 
                        <i-button type="primary" @click="sqFindAll()">好友申请
                            <Badge :count="jiaNumber"></Badge>    
                        </i-button> 
                        <i-button type="warning" @click="BHFindAll()" >驳回的申请
                            <Badge :count="NoNumber"></Badge> 
                        </i-button> 
                    </p>
                     <Row   v-for="(friend,index) in FriendDate" :key="index" style="border-bottom:1px skyblue solid;margin-top: 10px;">
                        <i-col span="4">{{friend.persons.username}}</i-col>
                        <i-col span="4">类型：{{friend.persons.type}}</i-col>
                        <i-col span="4">性别：{{friend.persons.sex}}</i-col>
                        <i-col span="6">电话：{{friend.persons.phone}}</i-col>
                        <i-col span="6"><i-button type="primary" @click="xiaoXi(friend.persons.id)">发消息</i-button>
                        <i-button type="error" @click="friendDel(friend.fid)" >删除好友</i-button> </i-col>
                    </Row>
                    
                </Card>
            </div>
            <!-- //修改密码 -->
              <div style="background:#eee;padding: 20px;width:1000px;margin: 0 auto;margin-top: 20px;">
                <Card :bordered="true">
                    <p slot="title">修改密码</p>
                    <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
                        <FormItem prop="password">
                            <Input type="password" v-model="formInline.password" placeholder="Password">
                                <Icon type="ios-lock-outline" slot="prepend"></Icon>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" @click="handleSubmit('formInline')">提交</Button>
                        </FormItem>
                    </Form>
                </Card>
            </div>
            <!-- <div style="background:#eee;padding: 20px;width:1000px;margin: 0 auto;margin-top: 20px;">
                <Card :bordered="false">
                     <Row>
                        <i-col span="5"><Button @click="value1 = true" type="primary">添加球队</Button></i-col>
                        <i-col span="5"><Button @click="teamFindAll()" type="primary">展示球队</Button></i-col>
                        <i-col span="5"><Button @click="playerClick()" type="primary">添加球员</Button></i-col>
                        <i-col span="5"><Button @click="playersClick()" type="primary">展示球员</Button></i-col>
                        <i-col span="4"><Button @click="findAll()" type="primary">显示用户</Button></i-col>
                    </Row>
                </Card>
            </div> -->

            <!-- 显示用户 -->
             <div>
                <Drawer :closable="false" width="1040" v-model="value4">
                    <p>显示用户</p>
                    
                    <Divider />
                     <content :style="{padding:'0 50px'}">
                        <Card>
                            <Table border :columns="columns2" :data="tableDate"   >
                                <template slot-scope="{ row }" slot="name">
                                    <strong>{{ row.name }}</strong>
                                </template>
                                <template slot-scope="{ row, index }" slot="action">
                                    <Button type="primary" size="small" @click="FriendAdd(row.id)">添加为好友</Button>
                                </template>
                            </Table>
                        </Card>
                    </content>
                </Drawer>
            </div>

            <!-- 消息记录，发送消息 -->
            <Drawer :closable="true" width="640" v-model="value1">
                <p>消息记录</p>
                <Divider />
                <div style="width:100%"  v-for="(chat,index) in chatDate" :key="index" >
                     <Card :bordered="false"  style="border-bottom:1px skyblue solid;margin-top: 10px;">
                          <p slot="title">{{chat.persons.username}}<span style="float:right">{{chat.cdate}}</span></p>
                          <p>{{chat.ccontext}} / <a @click="chatDel(chat.cid)" style="color:red;float:right;font-size:10px;">删除消息</a></p>
                     </Card>
                </div>
                <Form :model="chatFormItem" :label-width="80">
                    <FormItem label="回复">
                        <Input type="textarea" id="context" v-model="chatFormItem.context"  :autosize="{minRows: 2,maxRows: 6}"></Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" @click="chatSubmitAdd('chatFormItem')">Submit</Button>
                    </FormItem>
                </Form>
            </Drawer>
            <!-- 显示申请列表 -->
            <Drawer :closable="false" width="840" v-model="value2">
               <p>显示申请列表</p>
                    <Divider />
                    <Row   v-for="(friend,index) in FriendSqDate" :key="index" style="border-bottom:1px skyblue solid;margin-top: 10px;">
                        <i-col span="4">{{friend.persons.username}}</i-col>
                        <i-col span="4">类型：{{friend.persons.type}}</i-col>
                        <i-col span="4">性别：{{friend.persons.sex}}</i-col>
                        <i-col span="6">电话：{{friend.persons.phone}}</i-col>
                        <i-col span="6"><a @click="friendTy(friend.fid,friend.fuserId)">同意</a>
                            <a @click="friendBty(friend.fid)" style="color:red;">不同意</a> </i-col>
                    </Row>
            </Drawer>
            <!-- 被驳回的申请 -->
            <Drawer :closable="false" width="840" v-model="value3">
                <p>被驳回的申请</p>
                <Divider />
                 <Row   v-for="(friend,index) in FriendbhDate" :key="index" style="border-bottom:1px skyblue solid;margin-top: 10px;">
                        <i-col span="4">{{friend.persons.username}}</i-col>
                        <i-col span="4">类型：{{friend.persons.type}}</i-col>
                        <i-col span="4">性别：{{friend.persons.sex}}</i-col>
                        <i-col span="6">电话：{{friend.persons.phone}}</i-col>
                        <i-col span="6">回复：{{friend.fname}} / 
                            <a @click="friendDel(friend.fid)" style="color:red;">删除</a> </i-col>
                    </Row>
            </Drawer>
            <!-- 展示球员 -->
            <!-- <Drawer :closable="false" width="840" v-model="value5">
                <p>展示球员</p>
                <Divider />
                    <content :style="{padding:'0 50px'}">
                    <Card>
                        <Table border :columns="columns4" :data="playerDate"   >
                            <template slot-scope="{ row }" slot="name">
                                <strong>{{ row.name }}</strong>
                            </template>
                            <template slot-scope="{ row, index }" slot="action">
                                <Button type="error" size="small" @click="playerRemove(row.pid)">删除</Button>
                            </template>
                        </Table>
                    </Card>    
                </content>
            </Drawer> -->

            <Footer class="layout-footer-center">2019-2020 &copy; TalkingData</Footer>
        </Layout>
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name:"table-main",
    inject:["reload"],
    data(){
        return{
            FriendDate:[],
            FriendSqDate:[],
            tableDate:[],
            TeamDate:[],
            chatDate:[],
            FriendbhDate:[],
            columns2:[
                {key: 'id', title: '序号', width: 60, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'createDatetime', title: '日期', width: 180, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'username', title: '姓名', width: 100, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'phone', title: '手机号码', width: 130, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'email', title: '邮箱', width: 180, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'zone', title: '地址', width: 180, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {title: 'Action',slot: 'action', width: 100,align: 'center' }
            ],
            columns3:[
                 {key: 'tid', title: '序号', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'tname', title: '名称', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'tshuju', title: '数据', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'tzhanji', title: '战绩', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'tjiaolian', title: '教练', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'tshuoming', title: '说明', width: 480, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {title: 'Action',slot: 'action', width: 150,align: 'center' }
            ],
            columns4:[
                {key: 'pid', title: '序号', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'pname', title: '名称', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'pweizhi', title: '位置', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'pshengao', title: '身高', width: 80, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'ptizhong', title: '体重', width: 480, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'pjingyan', title: '经验', width: 480, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'pguoji', title: '国籍', width: 480, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {key: 'pshuoming', title: '说明', width: 480, titleAlign: 'center', columnAlign: 'center',isResize:true},
                {title: 'Action',slot: 'action', width: 150,align: 'center' }
            ],
            value5: false,
            value4: false,
            value3: false,
            value2: false,
            value1: false,
            styles: {
                height: 'calc(100% - 55px)',
                overflow: 'auto',
                paddingBottom: '53px',
                position: 'static'
            },
            formInline: {
                    password: ''
            },
            ruleInline: {
                password: [
                    { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                    { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                ]
            },
            upTitleAreaResult:[],
            pStyle: {
                fontSize: '16px',
                color: 'rgba(0,0,0,0.85)',
                lineHeight: '24px',
                display: 'block',
                marginBottom: '16px'
            },
            chatFormItem:{
                context:''
            },
            TeamNum:0,
            number:0
            ,jiaNumber:0
            ,NoNumber:0
        }
    },
    methods:{
        SportsCircle(){
            this.$router.push({
            path: `/SportsCircle/` })
        },
        MyTieZi(){
            this.$router.push({
            path: `/MyTieZi/` })
        },
        Team(){
            this.$router.push({
            path: `/Team/` })
        },
        TableMain(){
            this.$router.push({
            path: `/TableMain/` })
        },
        adminOut(){
            sessionStorage.clear();
            this.$router.push({
            path: `/` })
        },
        Home(){
            this.$router.push({
            path: `/Home/` })
        },
        //添加好友
        FriendAdd(id) {
            console.log(id);
            this.userId = sessionStorage.getItem('userId');
            axios('http://localhost:8081/FriendAdd?fFirendID='+id+'&fUserID='+this.userId).then((res) =>{
                if(res=1){
                    this.$Message.success('操作成功!');
                    this.reload();
                }else{
                    this.$Message.error('验证失败!');
                }
            })
        },
        //修改密码
        handleSubmit(formInline) {
            this.upTitleAreaResult = this.formInline;
            var password = this.upTitleAreaResult.password;
            console.log(password);
            this.userId = sessionStorage.getItem('userId');
            axios('http://localhost:8081/personsUpdate?password='+password+'&id='+this.userId).then((res) =>{
                if(res=1){
                    this.$Message.success('修改成功，请重新登录!');
                        this.$router.replace('/');
                }else{
                        this.$Message.error('表单验证失败!');
                    }
            })
        },
         //反向操作向后台获取用户信息数据
        findAll(){
            this.userId = sessionStorage.getItem('userId');
            this.$ajax('http://localhost:8081/fUserIdFindAll?fUserId='+this.userId).then(res=>{
                this.tableDate = res.data;
                this.value4 = true;
                console.log(this.tableDate);
            }).catch(function (error){
                console.log(error);
                
            });
        },
         //删除好友
        friendDel(fid){
            console.log("fid:"+fid)
            axios('http://localhost:8081/friendDel?fId='+fid).then((res) =>{
                if(res=1){
                    this.reload();
                    this.$Modal.confirm({
                        title: '删除成功！',
                        loading: false
                    });
                }else{
                    this.$Message.error('验证失败!');
                }
            })
        },
        //查询消息
        xiaoXi(id){
            var sessionStorage = window.sessionStorage;
            sessionStorage.setItem("cFpid",id);
            this.userId = sessionStorage.getItem('userId');
            this.$ajax('http://localhost:8081/chatFindAll?cFpid='+id+"&cJpid="+this.userId).then(res=>{
                this.chatDate = res.data;
                this.value1 = true;
                console.log(this.chatDate);
            }).catch(function (error){
                console.log(error);
            });
        },
        //发送哦消息
        chatSubmitAdd(chatFormItem){
            this.userId = sessionStorage.getItem('userId');
            this.cFpid = sessionStorage.getItem('cFpid');
            this.context = this.chatFormItem.context;
            console.log("userId:"+this.userId);
            console.log("cFpid:"+this.cFpid);
            console.log("context:"+this.context);
            axios('http://localhost:8081/chatAdd?cFpid='+this.userId+'&cJpid='+this.cFpid+"&cContext="+this.context).then((res) =>{
                this.TeamNum = res.data;
                if(this.TeamNum==1){
                    this.reload();
                    this.$Message.success('操作成功!');
                }else{
                    this.$Message.success('操作失败!');
                }
                
            });
        },
        //删除消息
        chatDel(cid){
             console.log("cid:"+cid)
            axios('http://localhost:8081/chatDel?cId='+cid).then((res) =>{
                if(res=1){
                    this.reload();
                    this.$Modal.confirm({
                        title: '删除成功！',
                        loading: false
                    });
                }else{
                    this.$Message.error('验证失败!');
                }
            })
        },
        //好友申请列表
        sqFindAll(){
            this.userId = sessionStorage.getItem('userId');
            this.$ajax('http://localhost:8081/FriendfFirendIdFindAll?fFirendID='+this.userId).then(res=>{
                this.FriendSqDate = res.data;
                this.value2 = true;
                console.log(this.FriendSqDate);
            }).catch(function (error){
                console.log(error);
                
            });
        },
        //同意好友申请
        friendTy(fid,fuserId){
            console.log(fid);
            console.log(fuserId);
            this.userId = sessionStorage.getItem('userId');
            axios('http://localhost:8081/friendupdatety?fid='+fid+"&fUserID="+this.userId+"&fFirendID="+fuserId).then((res) =>{
                if(res=1){
                    this.$Message.success('操作成功!');
                    this.reload();
                }else{
                    this.$Message.error('验证失败!');
                }
            })
        },
        //不同意好友申请
        friendBty(fid){
            console.log(fid);
            axios('http://localhost:8081/friendupdatebty?fid='+fid).then((res) =>{
                if(res=1){
                    this.$Message.success('操作成功!');
                    this.reload();
                }else{
                    this.$Message.error('验证失败!');
                }
            })
        },
        BHFindAll(){
            this.userId = sessionStorage.getItem('userId');
                this.$ajax('http://localhost:8081/FriendbhFindAll?fFirendID='+this.userId).then(res=>{
                    this.FriendbhDate = res.data;
                    this.value3 = true;
                    console.log(this.FriendbhDate);
                }).catch(function (error){
                    console.log(error);
                    
                });
        }

    },
    //展示个人信息
    created(){
        this.userId = sessionStorage.getItem('userId');
        this.$ajax('http://localhost:8081/idFindAll?id='+this.userId).then(res=>{
            this.tableDate = res.data;
            console.log(this.tableDate);
        }).catch(function (error){
            console.log(error);
        });
    },
     //根据用户编号查询好友
    mounted(){
        this.userId = sessionStorage.getItem('userId');
        console.log("PidFindAll:"+this.userId)
        this.$ajax('http://localhost:8081/FriendFindAll?fUserId='+this.userId).then(res=>{
            this.FriendDate = res.data;
            console.log(this.FriendDate);
        }).catch(function (error){
            console.log(error);
        });

        axios('http://localhost:8081/chatCountFindAll?cJpid='+this.userId).then((res) =>{
            this.number = res.data;
        })
        axios('http://localhost:8081/countFriendWei?Jpid='+this.userId).then((res) =>{
            this.jiaNumber = res.data;
        })
        axios('http://localhost:8081/countFriendNo?userId='+this.userId).then((res) =>{
            this.NoNumber = res.data;
        })
    }
}
</script>
